<template>
	<view class="postDetail">
		<div class="header">
			<div class="top">
				<div class="left">
					<div class="left-item">
						<img :src="list.user.avatar?list.user.avatar:'https://img2.baidu.com/it/u=3879377406,3923870846&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=502'" alt="" srcset="">
					</div>
					<div class="left-right">
						<p style="color: #4289ff; font-weight: 800; ">{{list.user.name}}</p>
						<p style="font-size: 15px;">{{list.user.sex}}</p>
					</div>
				</div>
				<div class="right">
					<span v-if="list.is_top==1">精华</span>
				</div>
			</div>
			<div class="bottom">
				<p>{{list.desc.text}}</p>
				<img :src="item" v-for="(item,index) in list.desc.images" alt="">
			</div>
		</div>
		<div class="center">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</view>
</template>

<script>
	import {getpostread} from '../request/index.js'
	export default {
		data() {
			return {
				id:null,
				list:[]
			}
		},
		methods: {
			
		},
		onLoad(options) {
			this.id=options.id
			getpostread({id:this.id}).then(res=>{
				this.list=res.data.data
				console.log(this.list);
			})
		}
	}
</script>

<style lang="scss">
.postDetail{
	width: 100%;
	height: 100%;
	
	.header{
		width: 100%;
		height: 138px;
		border-bottom: 10px solid #f5f5f3;
		box-sizing: border-box;
		padding: 10px;
		.top{
			width: 100%;
			height: 53px;
			display: flex;
			justify-content: space-between;
			.left{
				width: 300px;
				height: 100%;
				display: flex;
				.left-item{	
					img{
						width: 50px;
						height: 50px;
						border-radius: 50%;
					}
				}
				.left-right{
				}
			}
			.right{
				width: 100px;
				text-align: center;
				line-height: 53px;
				span{
					padding: 5px 7px;
					background-color: #ffc107;
					color: #fff;
				}
			}
		}
		.bottom{
			width: 100%;
			height: 53px;
		}
	}
	.center{
		width: 100%;
		height: calc(100% - 138px);
		box-sizing: border-box;
		padding: 10px;
		background-color: red;
		display: flex;
		.left{
			width: 50px;
		}
	}
}
</style>
